<template>
  <div>
    <!--搜索条件-->
    <el-form :inline="true" size="mini" class="auto-width-form custom-form">
      <el-form-item label="时间段">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          align="left"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['8:30:00', '17:30:00']">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="日志类型">
        <el-select placeholder="选择类型" v-model="queryParams.type">
          <el-option v-for="item in types" :key="item.type" :label="item.name" :value="item.type"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()">查询</el-button>
      </el-form-item>
    </el-form>
    <!--查询结果列表-->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;">
      <template slot="empty">
        <empty-tip></empty-tip>
      </template>
      <el-table-column
        type="index"
        width="40">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="name"
        label="日志名称">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="remark"
        label="日志描述">
      </el-table-column>
      <el-table-column
        prop="type"
        label="日志类型">
        <template slot-scope="scope">
          <span>{{types[scope.row.type].name}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="userId"
        label="请求用户">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="reqIp"
        label="用户IP">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="totalTime"
        label="执行耗时">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="记录时间">
        <template slot-scope="scope">
          <span>{{parseTime(scope.row.createTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="jointPt"
        label="调用">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="params"
        label="请求参数">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="results"
        label="返回结果">
      </el-table-column>
      <el-table-column
        fixed="right"
        prop="opts"
        label="操作"
        width="60">
        <template slot-scope="scope">
          <el-button type="text" @click="viewInfo(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="custom-pagination"
      @current-change="query"
      :current-page.sync="queryParams.pageNumber"
      :page-size="queryParams.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="tableDataTotal"
      style="text-align:right;">
    </el-pagination>

    <el-drawer
      title="日志详情"
      v-if="logInfo"
      custom-class="log-info-view"
      :visible.sync="logInfo"
      direction="rtl"
      :size="400"
      :before-close="handleClose">
      <div class="log-info-content">
        <p><span class="title-text">{{logInfo.name}}</span> <span class="sub-text">{{logInfo.remark}}</span></p>
        <p class="clock-text"><i class="el-icon-alarm-clock"></i>&nbsp;{{parseTime(logInfo.createTime)}}</p>
        <p class="req-info">
          <el-tag type="primary" size="mini">{{types[logInfo.type].name}}</el-tag>
          <el-divider direction="vertical"></el-divider>
          <span><i class="el-icon-user"></i>&nbsp;{{logInfo.userId}}</span>
          <el-divider direction="vertical"></el-divider>
          <span><i class="el-icon-connection"></i>&nbsp;{{logInfo.reqIp}}</span>
          <el-divider direction="vertical"></el-divider>
          <span><i class="el-icon-timer"></i>&nbsp;{{logInfo.totalTime}}毫秒</span>
        </p>
        <el-divider content-position="left">执行方法</el-divider>
        <div class="code-info">{{parseMethod(logInfo.jointPt)}}</div>
        <el-divider content-position="left">请求参数</el-divider>
        <json-viewer
          :value="JSON.parse(logInfo.params)"
          :expand-depth=5
          copyable
          theme="my-jv-theme"
          sort></json-viewer>
        <el-divider content-position="left">返回结果</el-divider>
        <json-viewer
          :value="JSON.parse(logInfo.results)"
          :expand-depth=5
          copyable
          theme="my-jv-theme"
          sort></json-viewer>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import JsonViewer from 'vue-json-viewer'
  export default {
    name: "index",
    components: {
      JsonViewer
    },
    data() {
      return {
        loading: false,
        // 查询参数配置
        queryParams: {
          startTime:'',
          endTime: '',
          type: '',
          pageNumber: 1,
          pageSize: 10
        },
        dateRange: '',
        types: {
          "all": {name:'全部', type:''},
          "login": {name:'登录', type:'login'},
          "logout": {name:'登出', type:'logout'},
          "add": {name:'新增', type:'add'},
          "edit": {name:'修改', type:'edit'},
          "delete": {name:'删除', type:'delete'},
          "query": {name:'查询', type:'query'},
          "other": {name:'其他', type:'other'}
        },
        // 结果列表参数
        tableData: [],
        tableDataTotal: 0,
        logInfo: null
      }
    },
    watch: {
      dateRange() {
        if(this.dateRange && this.dateRange.length>0){
          this.queryParams.starTtime = this.dateRange[0];
          this.queryParams.endTime = this.dateRange[1];
        }else{
          this.queryParams.startTime = '';
          this.queryParams.endTime = '';
        }
      }
    },
    mounted: function(){
      this.query();
    },
    methods: {
      query: function(currPage){
        if(!currPage)
          this.queryParams.pageNumber = 1;
        this.loading = true;
        this.api.post('/bucket-log/system/log/list', this.queryParams)
          .then((data) => {
            this.tableData = data.data.records;
            this.tableDataTotal = parseInt(data.data.total);
            this.loading = false;
          });
      },
      parseTime: function(time){
        return this.$moment(time).format('YYYY-MM-DD HH:mm:ss');
      },
      parseMethod(str) {
        str = str.replace('execution(', '');
        str = str.substring(0, str.lastIndexOf(')'));
        return str;
      },
      viewInfo(row) {
        this.logInfo = row;
      },
      handleClose() {
        this.logInfo = null;
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .log-info-view {
    .el-drawer__body {
      overflow: auto;
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .log-info-content {
    margin: 0 10px 10px 10px;
    .title-text {
      font-size: 2em;
      font-weight: bold;
    }
    .sub-text {
      color: gray;
    }
    .clock-text {
      color: #c0c4cc;
    }
    .req-info {
      display: flex;
    }
  }
</style>
